<!-- 新增编辑车辆 -->
<template>
  <el-dialog
    :visible="showDialog"
    title="新增车辆"
    width="600px"
    @close="closeDialog"
  >
    <el-form
      ref="vehicleForm"
      :model="vehicleForm"
      :rules="rules"
    >
      <el-form-item
        label="车辆类型:"
        label-width="110px"
        prop="truckTypeId"
      >
        <el-select
          v-model="vehicleForm.truckTypeId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in listSel"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="车牌号码:"
        label-width="110px"
        prop="licensePlate"
      >
        <el-input
          v-model="vehicleForm.licensePlate"
          placeholder="请输入车牌号码"
        />
      </el-form-item>
      <el-form-item
        label="GPS设备ID"
        label-width="110px"
        prop="deviceGpsId"
      >
        <el-input
          v-model="vehicleForm.deviceGpsId"
          placeholder="请输入GPS设备ID"
        />
      </el-form-item>
      <template>
        <el-button
          class="btn"
          type="warning"
          @click="isOk"
        >确认</el-button>
        <el-button
          class="btn"
          @click="closeDialog"
        >取消</el-button>
      </template>
    </el-form>
  </el-dialog>
</template>
<script>
import { _postVehicleAdd } from '@/api/vehicle'
export default {
  name: 'VehicleAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    listSel: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      vehicleForm: {
        licensePlate: '',
        deviceGpsId: '',
        truckTypeId: ''
      },
      rules: {
        licensePlate: [
          { required: true, message: '此处必须填写', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '此处必须填写', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '此处必须选择', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:showDialog', false)
      this.$refs.vehicleForm.resetFields()
    },
    isOk() {
      console.log(this.vehicleForm)
      this.$refs.vehicleForm.validate(async(isOk) => {
        if (isOk) {
          try {
            await _postVehicleAdd(this.vehicleForm)
            this.$message.success('新增成功')
            this.closeDialog()
            this.$parent.getVehicleSel()
          } catch (err) {
            this.$message.warning('新增失败')
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.btn {
  width: 90px;
  margin-top: 14px;
  margin-bottom: 38px;
}
/deep/ .el-dialog__body {
  padding: 40px 50px 0 20px !important;
}
</style>
